<!-- 登录模块 -->
<template>
  <div class="login">
    <!-- 登录模块header部分开始 -->
    <div class="login-header">
      <div class="login-header__back" @click="goBack"><span></span> {{ $t("login.back") }}</div>
      <div class="login-header__help">{{ $t("helpCenter") }}</div>
      <div class="login-header__lang">
        <div class="lang__text" @click="showLangList = !showLangList">
          {{ langText }}
        </div>
        <div class="lang-list" v-show="showLangList">
          <div class="lang-list__item" @click="changeLang('cs')">简体中文</div>
          <div class="lang-list__item" @click="changeLang('tc')">繁體中文</div>
          <div class="lang-list__item" @click="changeLang('en')">English</div>
        </div>
      </div>
    </div>
    <!-- 登录模块header部分结束 -->
    <!-- 登陆模块主体部分开始 -->
    <div class="login-body">
      <div class="login-body-header">
        <div class="body-header__logo"></div>
        <div class="body-header__slogan">{{ $t("slogan") }}</div>
      </div>
      <!-- 登陆盒子开始 -->
      <div class="login-body-box">
        <div class="body-box-wrapper">
          <div class="box-wrapper-tabs">
            <div
              :class="['wrapper-tabs-item', { active: activeTab === 'msg' }]"
              @click="activeTab = 'msg'"
            >
              <span>{{ $t("login.msg") }}</span>
            </div>
            <div
              :class="['wrapper-tabs-item', { active: activeTab === 'pass' }]"
              @click="activeTab = 'pass'"
            >
              <span>{{ $t("login.pass") }}</span>
            </div>
          </div>
          <div class="box-wrapper-content">
            <div v-if="activeTab === 'pass'">
              <div class="login-form">
                <div class="login-form-item">
                  <div v-show="showNationCode" class="input_before__2voxqq" @click="goToPicker">
                    <span>+86</span>
                    <div class="input_arrow__ypiplq false"></div>
                  </div>
                  <input
                    autocomplete="off"
                    type="text"
                    :placeholder="$t('login.p_email')"
                    @input="handlePhoneChange"
                  />
                </div>
                <div class="login-form-item">
                  <input
                    autocomplete="off"
                    :type="password_type"
                    :placeholder="$t('login.p_pass')"
                    @input="handlePassChange"
                  />
                  <div class="input_after__3ohooa" @click.stop="togglePass">
                    <span
                      :class="[
                        'input_icon__ewiea9',
                        { 'input_off__3o-wkn': showPass },
                      ]"
                    ></span>
                  </div>
                </div>
                <div v-if="showError" class="login-form-error">
                  帐号或密码错误,请重新输入 (1012101)
                </div>
                <div v-if="!showLoginBtn" class="login-form-btn--disable">
                  {{ $t("login.loginText") }}
                </div>
                <div
                  v-else
                  class="login-form-btn--able"
                  @click.stop="handleSubmit"
                >
                  {{ $t("login.loginText") }}
                </div>
              </div>
            </div>
            <div v-else></div>
          </div>
          <div class="box-wrapper-content">
            <div v-if="activeTab === 'msg'">
              <div class="login-form">
                <div class="login-form-item">
                  <div v-show="showNationCode" class="input_before__2voxqq" @click="goToPicker">
                    <span>+86</span>
                    <div class="input_arrow__ypiplq false"></div>
                  </div>
                  <input
                    autocomplete="off"
                    type="text"
                    :placeholder="$t('login.p_phone')"
                    @input="handlePhoneChange"
                  />
                </div>
                <div class="login-form-item">
                  <input
                    autocomplete="off"
                    :type="password_type"
                    :placeholder="$t('login.p_code')"
                    @input="handlePassChange"
                  />
                  <div class="input_after__3ohooa" @click.stop="togglePass">
                    <button
                      :class="[
                        'input_button__2irelx',
                        { input_button__change: showLoginBtn },
                      ]"
                    >
                      {{ $t("login.get_code") }}
                    </button>
                  </div>
                </div>
                <div v-if="showError" class="login-form-error">
                  手机号或验证码错误,请重新输入 (1012101)
                </div>
                <div v-if="!showLoginBtn" class="login-form-btn--disable">
                  {{ $t("login.loginText") }}
                </div>
                <div
                  v-else
                  class="login-form-btn--able"
                  @click.stop="handleSubmit"
                >
                  {{ $t("login.loginText") }}
                </div>
              </div>
            </div>
            <div v-else></div>
          </div>
        </div>
      </div>
      <!-- 登陆盒子结束 -->
    </div>
    <!-- 登陆模块主体部分结束 -->
    <!-- 登陆模块底部部分开始 -->
    <div class="footer_wrapper__gbtyuw">
      <div class="base_footer_link__3rxyoz">
        <span>{{ $t("login.policy") }}</span>
      </div>
      <p class="footer_copyright__3blxo0">
        <span></span>{{ $t("login.backup")
        }}<span>{{ $t("login.contact") }}</span>
      </p>
    </div>
    <!-- 登陆模块底部部分结束 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  mapState,
  mapGetters,
  mapActions,
  createNamespacedHelpers,
} from "vuex";
let loginNS = createNamespacedHelpers("login");
console.log(loginNS);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      showPass: false,
      showLangList: false, // 用来显示语言列表
      // count: 1,
      activeTab: "pass", //pass
      username: "",
      password: "1234",
      password_type: "password",
      showError: false,
    };
  },
  //监听属性 类似于data概念
  computed: {
    showNationCode: function () {
      return this.username.length >= 6 ? true : false;
    },
    showLoginBtn: function () {
      if (!!this.username && !!this.password) {
        return true;
      } else {
        return false;
      }
    },
    ...loginNS.mapState(["lang"]), // this.$store.state.login.lang
    ...mapState(["count"]),
    ...mapGetters(["totalPrice"]),
    langText: function () {
      // console.log(this.$i18n.locale)
      let text = "";
      switch (this.$i18n.locale) {
        case "tc":
          text = "繁體中文";
          break;
        case "en":
          text = "English";
          break;
        case "cs":
          text = "简体中文";
          break;
        default:
          text = "简体中文";
          break;
      }
      return text;
    },
  },
  // computed: mapState(['count']),
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goBack: function () {
      this.$router.push('/home/index')
    },
    goToPicker: function () {
      this.$router.push('/home/countrypicker')
    },
    togglePass: function () {
      this.showPass = !this.showPass;
      this.password_type =
        this.password_type === "password" ? "text" : "password";
    },
    handleSubmit: function () {
      // this.$store.dispatch('user/save_token_sync', {
      // 	username: this.username,
      // 	password: this.password,
      // })
      // 登录请求 发送
      this.$axios
        .post("/user/login", {
          username: this.username,
          password: this.password,
        })
        .then((res) => {
          console.log(res);
          // 如果登录成功，
          // 1. 跳转到我的页面中
          // 2. token 存到 vuex 中，方便其它页面或者组件需要的时候，可以从 vuex 中获取
          if (res.code == 1) {
            this.showError = false;
            this.$store.commit("user/SAVE_TOKEN", {
              token: res.data.token,
            });
            this.$router.push("/my");
          } else {
            this.showError = true;
          }
        });
    },
    handlePassChange: function (e) {
      this.password = e.target.value;
    },
    handlePhoneChange: function (e) {
      console.log(e.target.value);
      this.username = e.target.value;
    },
    // this.increaseSync(payload) => this.$store.dispatch('increaseSync',payload)
    ...mapActions(["increaseSync"]),
    handleAdd: function () {
      // this.$store.state.count++
      console.log(this.$store);
      // this.$store.dispatch(type,payload)
      // this.$store.dispatch('increaseSync', {
      // 	num: 1,
      // })
      this.increaseSync({ num: 1 });
    },
    changeLang: function (lang) {
      // 隐藏语言选择的菜单
      this.showLangList = false;
      // 设置语言
      this.$i18n.locale = lang; // cs tc en
      // 修改存到仓库 login 模块中  lang中
      this.$store.dispatch("login/changeLang", {
        lang,
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log(this.$store.state.count)
    // console.log(this.$store.state.login.lang)
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //方法1: 直接生成一个验证码对象。
    // try {
    // 	var captcha1 = new TencentCaptcha('2057644568', callback)
    // 	captcha1.show() // 显示验证码
    // } catch (error) {
    // 	loadErrorCallback()
    // }
    //方法2:绑定一个元素并自动识别场景id和回调。
    // try {
    // 	// 绑定一个元素并自动识别场景id和回调
    // 	// 验证码会读取dom上的`data-appid`和`data-cbfn`以及`data-biz-state`(可选)自动初始化
    // 	new TencentCaptcha(document.getElementById('TencentCaptcha'))
    // } catch (error) {
    // 	loadErrorCallback()
    // }
    //方法3：绑定一个元素并手动传入场景Id和回调。
    // try {
    // 	new TencentCaptcha(document.getElementById('TencentCaptcha'), 'CaptchaAppId', callback, {
    // 		bizState: '自定义透传参数',
    // 	})
    // } catch (error) {
    // 	loadErrorCallback()
    // }
    // 	function callback(res) {
    // 		/* res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
    //    res（客户端出现异常错误 仍返回可用票据） = {ret: 0, ticket: "String", randstr: "String", errorCode: Number, errorMessage: "String"}
    //    res（用户主动关闭验证码）= {ret: 2}
    // */
    // 		if (res.ticket) {
    // 			// 上传票据 可根据errorCode和errorMessage做特殊处理或统计
    // 		}
    // 	}
    // 	// 验证码js加载错误处理
    // 	function loadErrorCallback() {
    // 		var CaptchaAppId = ''
    // 		/* 生成票据或自行做其它处理 */
    // 		var ticket = 'terror_1001_' + CaptchaAppId + Math.floor(new Date().getTime() / 1000)
    // 		callback({
    // 			ret: 0,
    // 			randstr: '@' + Math.random().toString(36).substr(2),
    // 			ticket: ticket,
    // 			errorCode: 1001,
    // 			errorMessage: 'jsload_error',
    // 		})
    // 	}
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.login {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  .login-header {
    height: 1.38889rem;
    padding: 0 0.66667rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .login-header__back {
      color: #7f7f7f;
      font-size: 0.38889rem;
      cursor: pointer;
      transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
      span {
        cursor: pointer;
        content: "";
        top: 20px;
        left: 30px;
        width: 13px;
        height: 13px;
        position: absolute;
        border: 2px solid #7f7f7f;
        border-width: 0 0 2px 2px;
        transform: rotate(45deg);
      }
    }
    .login-header__help {
      color: #7f7f7f;
      font-size: 0.38889rem;
      margin-left: 0.75rem;
      cursor: pointer;
      transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
    }

    .login-header__lang {
      position: relative;
      margin-left: 0.75rem;
      .lang__text {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        color: #7f7f7f;
        font-size: 0.38889rem;
        cursor: pointer;
        transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
        &::after {
          content: "";
          height: 0;
          width: 0;
          border: 0.13889rem solid transparent;
          border-top-color: #7f7f7f;
          margin-left: 0.27778rem;
          margin-bottom: -0.05556rem;
          display: inline-block;
        }
      }
      .lang-list {
        position: absolute;
        background: #fff;
        border-radius: 0.13889rem;
        box-shadow: 0 0 0.13889rem #d3d3d3;
        right: 0;
        top: 0.88889rem;
        width: 3.05556rem;
        z-index: 10;
        .lang-list__item {
          height: 1.11111rem;
          padding: 0.13889rem 0.55556rem;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-align: center;
          align-items: center;
          -ms-flex-pack: center;
          justify-content: center;
          -ms-flex-direction: row;
          flex-direction: row;
          white-space: nowrap;
          color: #7f7f7f;
          font-size: 0.38889rem;
          cursor: pointer;
          transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
        }
      }
    }
  }
  .login-body {
    flex: 1;
    .login-body-header {
      padding-bottom: 1.36111rem;
      margin-bottom: -82px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-direction: column;
      flex-direction: column;
      padding-top: 0.55556rem;
      padding-bottom: 0.83333rem;
      margin-bottom: 0;
      .body-header__logo {
        width: 4.25rem;
        height: 0.69444rem;
        margin-bottom: 0.41667rem;
        background-image: url();
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 100% 100%;
      }

      .body-header__slogan {
        font-size: 0.33333rem;
        font-weight: 500;
        padding: 0 0.66667rem;
        text-align: center;
      }
    }
    .login-body-box {
      margin: 0 auto;
      .body-box-wrapper {
        position: relative;
        padding: 0.55556rem 0.66667rem 0.66667rem;
        .box-wrapper-tabs {
          margin-bottom: 0.88889rem;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-align: center;
          align-items: center;
          -ms-flex-pack: center;
          justify-content: center;
          -ms-flex-direction: row;
          flex-direction: row;
          margin-bottom: 20px;
          overflow: hidden;
          .active {
            color: #000 !important;
          }
          .wrapper-tabs-item {
            position: relative;
            height: 0.77778rem;
            padding: 0 0.27778rem;
            flex: 1 1;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: center;
            justify-content: center;
            height: 34px;
            cursor: pointer;
            white-space: nowrap;
            box-sizing: border-box;
            padding: 0 10px;
            color: rgba(0, 0, 0, 0.5);
            &:first-child::after {
              content: "";
              height: 0.33333rem;
              border-right: 1px solid rgba(0, 0, 0, 0.1);
              position: absolute;
              right: 0;
              top: 50%;
              -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
            }
            span {
              line-height: 0.77778rem;
              font-size: 0.44444rem;
            }
          }
        }
        .box-wrapper-content {
          .login-form {
            .login-form-item {
              display: flex;
              width: 100%;
              height: 45px;
              background: #f7f7f7;
              border-radius: 9px;
              .input_before__2voxqq {
                height: 1.22222rem;
                height: 45px;
                padding: 0 0.27778rem;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                -ms-flex-pack: center;
                justify-content: center;
                -ms-flex-direction: row;
                flex-direction: row;
                position: relative;
                box-sizing: border-box;
                span {
                  font-size: 0.38889rem;
                  min-width: 1.11111rem;
                  text-align: center;
                  font-size: 12px;
                }

                .input_arrow__ypiplq {
                  background-image: url();
                  background-repeat: no-repeat;
                  background-position: 50%;
                  background-size: auto 100%;
                  width: 0.38889rem;
                  height: 0.66667rem;
                  transition: -webkit-transform 0.2s ease-in;
                  transition: transform 0.2s ease-in;
                  transition: transform 0.2s ease-in,
                    -webkit-transform 0.2s ease-in;
                  &::after {
                    content: "";
                    height: 0.33333rem;
                    border-right: 1px solid rgba(0, 0, 0, 0.1);
                    position: absolute;
                    right: 0;
                    top: 50%;
                    -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
                  }
                }
              }
              .input_after__3ohooa {
                height: 1.22222rem;
                width: 0.94444rem;
                padding-right: 0.27778rem;
                margin-left: -0.13889rem;
                height: 45px;
                box-sizing: border-box;
                width: 35px;
                padding-right: 11px;
                margin-left: -4px;
                cursor: pointer;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                -ms-flex-pack: center;
                justify-content: center;
                -ms-flex-direction: row;
                flex-direction: row;
                .input_off__3o-wkn {
                  background-image: url() !important;
                }
                .input_icon__ewiea9 {
                  width: 0.66667rem;
                  height: 0.66667rem;
                  width: 24px;
                  height: 24px;
                  background-image: url();
                  background-repeat: no-repeat;
                  background-position: 50%;
                  background-size: 100% 100%;
                }
                .input_button__change {
                  background-color: #2ad181 !important;
                }
                .input_button__2irelx {
                  border: none;
                  margin-right: 1.65rem;
                  font-size: 0.33333rem;
                  padding: 0 0.27778rem;
                  height: 1.22222rem;
                  min-width: 2.77778rem;
                  margin-left: 0.27778rem;
                  background-color: rgba(0, 0, 0, 0.15);
                  color: #fff;
                  border-radius: 0.27778rem;
                }
              }
              input {
                outline: none;
                border: none;
                background-color: #f7f7f7;
                border-radius: 0.19444rem;
                height: 1.22222rem;
                padding: 0.27778rem 0.41667rem;
                font-size: 0.38889rem;
                line-height: 0.66667rem;
                width: 100%;
              }
              .input_wrapper__1eoo9z .input_input__2r8nrw {
                border-radius: 0.19444rem;
                height: 1.22222rem;
                padding: 0.27778rem 0.41667rem;
                font-size: 0.38889rem;
                line-height: 0.66667rem;
              }
              margin-bottom: 0.3rem;
            }
            .login-form-error {
              color: #ec5b66;
              font-size: 0.33333rem;
              padding: 0.55556rem 0 0;
              margin-bottom: -0.33333rem;
              text-align: center;
            }
            .login-form-btn--able {
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0.75rem auto 0;
              background-color: #2ad181;
              color: white;
              border-radius: 0.27778rem;
              font-size: 0.38889rem;
              height: 1.22222rem;
            }
            .login-form-btn--disable {
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 1.5rem auto 0;
              background-color: #c0f1d9;
              color: white;
              border-radius: 0.27778rem;
              font-size: 0.38889rem;
              height: 1.22222rem;
            }
          }
        }
      }
    }
  }

  .footer_wrapper__gbtyuw {
    padding: 0.83333rem 0.66667rem;
    padding: 20px;
    text-align: center;
    color: #9b9b9b;
    font-size: 0.33333rem;
    .base_footer_link__3rxyoz {
      font-size: 0.38889rem;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-direction: row;
      flex-direction: row;
      color: #5a6e97;
      margin: 0 0 0.27778rem;
      span {
        margin-top: 2rem;
      }
    }

    .footer_copyright__3blxo0 {
      padding: 20px;
      text-align: center;
      color: #9b9b9b;
      font-size: 0.33333rem;
      span {
      }
    }
  }
}
</style>
